<template>
  <el-form>
    <!-- 开始时间 -->
    <el-form-item label="开始时间">
      <el-date-picker
          size="mini"
          style="width: 175px"
          v-model="startTime"
          type="datetime"
          placeholder="选择开始时间"
          default-time="12:00:00"
          @change="timeRangeChange(1)"
      ></el-date-picker>
    </el-form-item>
    <!-- 结束时间 -->
    <el-form-item label="结束时间">
      <el-date-picker
          size="mini"
          style="width: 175px"
          v-model="endTime"
          type="datetime"
          placeholder="选择结束时间"
          default-time="12:00:00"
          @change="timeRangeChange(2)"
      >
      </el-date-picker>
    </el-form-item>
    <el-form-item>
      <el-button
          size="mini"
          type="primary"
          @click="submitForm"
      >提交
      </el-button>
      <el-button
          size="mini"
          type="primary"
          @click="resetForm"
      >重置
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      startTime: undefined,
      endTime: undefined
    }
  },
  methods: {

    /**
     * 时间范围查询条件
     */
    timeRangeChange: function (index) {
      if (this.startTime === undefined || this.endTime === undefined) {
        return 0
      }
      let s_obj = new Date(this.startTime);
      let e_obj = new Date(this.endTime);
      if (s_obj.getTime() >= e_obj.getTime() && this.endTime !== undefined && this.endTime !== null) {
        this.$message("开始时间必须早于结束时间!");
        switch (index) {
          case 1:
            this.startTime = undefined;
            break;
          case 2:
            this.endTime = undefined;
            break;
          default:
            break;
        }
        return 0
      }
    },

    /**
     * 提交表单
     */
    submitForm: function () {
      if (this.startTime === undefined || this.endTime === undefined) {
        this.$message.error("请填写完整检索时间范围")
        return 0
      }
      const pd = {
        s_time: this.formatTime(this.startTime),
        e_time: this.formatTime(this.endTime),
      }
      this.$emit("submitForm", pd);
    },
    /**
     * 重置表单
     */
    resetForm: function () {
      this.startTime = undefined;
      this.endTime = undefined;
      this.$emit("resetForm");
    },
    /**
     * 时间检索
     * @param time
     */
    formatTime(time) {
      if (time === undefined || time === null) {
        return undefined
      }
      let date = new Date(time)
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`
    }
  }
}
</script>

<style scoped>

</style>